<template>
    <div>
        <div v-if="!total">
            <div>当前暂无数据</div>
        </div>
        <!--table表格-->
        <div v-else>
            <el-row>
                筛选
            </el-row>
            <el-table :data="tableData3" style="width: 100%" height="500" @sort-change="sortChange">
                <el-table-column v-for="(item,key,i) in tableKey" :prop="item.value" :label="item.name"
                                 sortable="custom" width="150"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <router-link to="back-detail">
                            <el-button @click="viewDetails(scope.row)" type="text" size="small">查看</el-button>
                        </router-link>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-row>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage1"
                                   :page-sizes="[1,5,10, 20, 30, 40, 50, 100]" :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="total">
                    </el-pagination>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                pfpath:"task-back-list",
                chpath:"task-back-list",
                tableData3: [],
                tableKey: [],
                currentPage1: 1, //默认打开显示在第几页
                total: "", //数据一共多少条
                pageSize: 5, //默认每页显示的条目数
                orderfield: [["id", "ASC"]],//定义默认排序方式和默认字段
            }
        },
        watch: {
            $route(to, from){//监听路由变化
                this.pfpath=this.$route.query.id
                console.log("算得上是多所多",this.$route.query);
                // data数据操作
                this.getDataPost(this.pfpath, {
                    limit: this.pageSize, //每页多少条
                    page: 0, //当前第几页
                    screen1: {},
                    order: this.orderfield,
                })
                console.log(to)
            }
        },
        created() {
            this.getDataPost(this.pfpath, {
                name:'测试1',
                password:"123456",
                limit: this.pageSize, //每页多少条
                page: 0, //当前第几页
                screen1: {},
                order: this.orderfield,
            })
        },
        methods: {
            viewDetails(row) {
                console.log(row.id);
                this.chpath='back-detail';
                this.$store.commit("add_task",[{"type": "task", "primaryKey": row.id},{"chpath":this.chpath}])
            },
            handleSizeChange(val) { //page-size改变触发
                console.log(`每页 ${val} 条`);
                this.pageSize = val; //给每页多少条全局赋值
                this.getDataPost(this.pfpath, {
                    limit: val, //每页多少条
                    page: this.currentPage1 - 1, //当前第几页
                    screen1: {},
                    order: this.orderfield,
                })
            },
            handleCurrentChange(val) { //当前第几页改变触发
                console.log(`当前页: ${val}`);
                this.currentPage1 = val; //给当前多少页赋值
                this.getDataPost(this.pfpath,{
                    limit: this.pageSize, //每页多少条
                    page: val - 1, //当前第几页
                    screen1: {},
                    order: this.orderfield,
                })
            },
            getDataPost(pfpath, dataC) { //数据请求方法post pfpath路径, dataC 参数对象
                return new Promise((res, rej) => {
                    this.$http.post(`logic/${pfpath}`, dataC).then(result => {
                        console.log(result)
                        if (result.status === 200) { //判断数据是否请求成功
                            this.total = result.body.args.count;
                            this.tableData3 = result.body.args.list;
                            for (let i in result.body.args.title) {
                                this.tableKey.push({
                                    name: result.body.args.title[i],
                                    value: i
                                })
                            }
                            res(result)
                        } else {
                            rej(false)
                        }
                    })
                })
            },
            sortChange(column) {
                if (column.order === "ascending") this.orderfield = [[column.prop, "ASC"]]
                else this.orderfield = [[column.prop, "DESC"]]
                console.log(this.orderfield);
                console.log(this.pageSize);
                this.getDataPost(this.pfpath,{
                    limit: this.pageSize, //每页多少条
                    page: 0, //当前第几页
                    screen1: {},
                    order: this.orderfield
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
</style>
